<template>
	<view>
		<!-- 返回上一页 -->
		<view class="" style="width: 90%;margin:60rpx auto; height: 100rpx; display: flex; align-items: center; ">
			<image @click="toReturn" style="width: 50rpx; height: 50rpx;" src="../../../static/images/goBack.png">
			</image>
			<p>开通VIP</p>

		</view>

		<!-- 用户信息 -->
		<view
			style="height: 200rpx; ;
		border-radius: 30rpx;  display: flex; align-items: center;justify-content: space-between; width: 90%; margin:  auto;">
			<view class="" style="display: flex; align-items: center; padding: 10px;">
				 <image v-if="userInfo.userinfo.like==2" style="border-radius: 50rpx; width: 100rpx;height:100rpx"
				  src="../../../static/nv (2).png"></image>
				 <image v-else style="border-radius: 50rpx; width: 100rpx;
				 height:100rpx" src="../../../static/nan.png"></image>
				<view class="">
					<p  v-if="dataListA.express==0" style="margin: 0  0 0 15px;font-size: 20px;font-weight: 700; padding: 10rpx 0;"> 点击登录</p>
					<p v-else style="margin: 0  0 0 30rpx;font-size: 36rpx;font-weight: 700;"> ID：{{dataListA.userId}}</p>
					<p v-if="dataListA.express==0"    style="margin: 0  0 0 15px;font-size: 18px;font-weight: 700;"> 暂未购买</p>
					<p v-else style="margin: 0  0 0 15px;font-size: 13px;font-weight: 700;"> 到期时间：{{dataListA.express}}</p>
				</view>
			</view>
		</view>
		<!-- 图文 -->
		<view class="" v-if="eID ==0"
			style="display: flex;align-items: center;justify-content: space-around; width: 90%; margin: 0rpx auto; background: linear-gradient(to right, #e8e9ed, #dbdbe4);  height: 130rpx; border-radius: 100rpx;">
			<view class="" style="display: flex;align-items: center;">
				<image style="width: 80rpx; height: 80rpx;" src="../../../static/images/user/VIP.png"></image>
				<view class="" style="font-size: 30rpx;margin-left: 20rpx; color: #7c7c88;">
					<p>开通VIP</p>
				</view>
			</view>
			<view
				style="display: flex;align-items: center;justify-content: center;border-radius: 30rpx; font-size: 20rpx; width: 250rpx; height: 60rpx;  background: linear-gradient(to right, #b1b1bb, #868593);color: #fff;">
				全场图书免费阅读！
			</view>
		</view>
		<view class="" v-else
			style="display: flex;align-items: center;justify-content: space-around; width: 90%; margin: 0rpx auto;
			 background: linear-gradient(to right, #fed18d, #febe5d);  height: 130rpx; border-radius: 100rpx;">
			<view class="" style="display: flex;align-items: center;">
				<image style="width: 80rpx; height: 80rpx;" src="../../../static/images/user/VIP1.png"></image>
				<view class="" style="font-size: 30rpx;margin-left: 20rpx; color: #4B2B14;">
					<p>尊贵的超级VIP用户</p>
				</view>
			</view>
			<view
				style="display: flex;align-items: center;justify-content: center;border-radius: 30rpx; font-size: 20rpx; width: 250rpx; height: 60rpx; 
				background: linear-gradient(to right, #FAEFDD,#FFDA96);color: #4B2B14;">
				全场万本书箱免费畅读
			</view>
		</view>
		<!-- 会员价格 -->
		<view class=""
			style="display: flex;align-items: center; flex-wrap: wrap; justify-content: space-between;width: 90%;margin:20rpx auto;">
			<view class="" v-for="(item ,index) in dataList" @click="toMember(index,item)"
				:class="active==index? 'active':'active1'" style="position: relative; text-align: center; margin-top: 20px ; 
			   width: 45%;  height: 200rpx; border-radius: 20rpx;">
				<p style="margin-top: 60rpx;">{{item.name}}</p>
				<p style="color: red; font-weight: 700;">{{item.price}}元</p>
				<p :class="active==index? 'active2':'active3'"
					style="font-size: 24rpx; width: 100%; height: 50rpx; line-height: 50rpx; position: absolute; bottom: 0; border-radius: 0  0 20rpx 20rpx;">
					全场图书免费阅读！
				</p>
			</view>

		</view>
		<!-- 支付方式 -->
		<view class="" style="width: 90%; margin:20rpx auto;">
			<p style="color: #a0a0a0;">选择支付方式</p>
			<radio-group @change="radioChange">
				<label style="  height: 80rpx; display: flex; align-items: center; justify-content: space-between;"
					v-for="(item,index) in dataPayment" :key="index">
					<view class="" style="display: flex; align-items: center;" >
						<image style="width: 50rpx; height: 50rpx; border-radius: 15rpx;"
							:src="item.img">
						</image>
						<sapn style="margin-left: 20rpx;">{{item.name}}</sapn>
					</view>

					<view>
						<radio :value="item.value"  />
					</view>

				</label>
			</radio-group>


		</view>
		<button @click="toSubmit()" style="margin-top: 40rpx; border-radius: 100rpx; 
			  border:1px solid #febe5d ; font-weight: 600;  width: 90%;
			   background: linear-gradient(to right, #fed18d, #febe5d);:;">立即支付:{{itemPrice}}元</button>
	</view>


	</view>
</template>

<script>
	import {
		getVipVipList,
		getVipSubmit,
			getMyUserInfo
	} from '@/http/api.js'
	export default {
		data() {
			return {
				dataListA:{},
				eID:'',
				current: -1,
				itemId: '',
				userInfo: uni.getStorageSync('userInfo'),
				active: 0,
				itemPrice: '',
				dataList: [], 
				detailValue:'',
				dataPayment: [{
						name: '支付宝支付',
						img: '../../../static/images/user/zfb.png',
						value:"alipay"
					},
					{
						name: '微信支付',
						img: '../../../static/images/user/wx.png',
						value:"wechat"
					},

				]

			};
		},
		onLoad(e) {
			console.log(e,"======");
			this.eID =e.id 
			this.VipList()
			this.MyUserInfo()
		},
		methods: {
			MyUserInfo() {
			
				let data = {
					"token": this.userInfo.userinfo.token
				}
				getMyUserInfo(data).then((res) => {
				this.expressVIP =res[1].data.data.express
				console.log(this.expressVIP);
					console.log(res[1].data.data, "用户信息");
					this.dataListA = res[1].data.data
					this.dataActive = res[1].data.data.like
			      
			
				})
			},
			radioChange(e){
	
				
			this.detailValue=e.detail.value
				console.log(e.detail.value,"Change事件");
			},
			// 选择会员
			toMember(index, item) {
				this.active = index
				this.itemPrice = item.price
				this.itemId = item.id
				console.log(item, "item");
			},
			// 返回上一页
			toReturn() {
				uni.navigateBack();
			},
			// vip 列表接口
			VipList() {
				getVipVipList().then((res) => {
					this.dataList = res[1].data.data
					this.itemPrice = res[1].data.data[0].price
					console.log(res[1].data.data, "vip 列表接口");
				})
			},
			// 立即支付
			toSubmit() {
				this.VipSubmit()
			},
			// 购买会员接口
			VipSubmit() {
				if (!this.detailValue) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'success',
						duration: 2000
					});
					return
				}
				let data = {
					"token": this.userInfo.userinfo.token,
					"vip_id": this.itemId,
					"appid": "2021004121688087",
					"paytype": this.detailValue,
				}
				getVipSubmit(data).then((res) => {
					console.log(res[1].data.data, "购买会员接口123");
				
					if (this.detailValue == 'alipay') {
						console.log("支付宝支付");
						console.log(res[1].data.data, "支付");
					
						var orderInfo = res[1].data.data; //从服务器获取的订单
						//获取支付宝支付对象
						var alipaySev = null; // 支付宝支付对象
						plus.payment.getChannels(function(channels) {
							for (var i in channels) {
								var channel = channels[i];
								if (channel.id === 'alipay') {
									alipaySev = channel;
								}
							}
							//发起支付
							plus.payment.request(alipaySev, orderInfo, function(result) {
								var rawdata = JSON.parse(result.rawdata);
								console.log("支付成功");
								uni.showToast({
									title: '支付成功',
									icon: 'success',
									duration: 2000
								});
							}, function(e) {
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								});
								console.log("支付失败：" + JSON.stringify(e));
							});
						}, function(e) {
							uni.showToast({
								title: '获取支付渠道失败',
								icon: 'none',
								duration: 2000
							});
							console.log("获取支付渠道失败：" + JSON.stringify(e));
						});
					} else if (this.detailValue == 'wechat') {
					
						console.log(res[1].data.data, "微信支付");
						var jsonObject = JSON.parse(res[1].data.data);
						console.log(jsonObject,"[[[[[]]]]]");
					
					
					
						//订单对象，从服务器获取
						var orderInfo = {
							"appid":jsonObject.appid, // 应用ID（AppID）
							"partnerid":jsonObject.partnerid, // 商户号（PartnerID）
							"prepayid":jsonObject.prepayid, // 预支付交易会话ID
							"package":jsonObject.package, // 固定值
							"noncestr":jsonObject.noncestr, // 随机字符串
							"timestamp":jsonObject.timestamp, // 时间戳（单位：秒）
							"sign":jsonObject.sign // 签名，这里用的 MD5 签名
						};
						console.log(orderInfo,"[[][][]][][777777]");
						//获取支付渠道
						// var wxpaySev = null;
						// plus.payment.getChannels(function(channels) {
						// 	for (var i in channels) {
						// 		var channel = channels[i];
						// 		if (channel.id === 'wxpay') {
						// 			wxpaySev = channel;
						// 		}
						// 	} 
						// 	//发起支付
						// 	plus.payment.request(wxpaySev, orderInfo, function(result) {
						// 		var rawdata = JSON.parse(result.rawdata);
						// 		console.log("支付成功");
						// 	}, function(e) {
						// 		console.log("支付失败：" + JSON.stringify(e));
						// 	});
						// }, function(e) {
						// 	console.log("获取支付渠道失败：" + JSON.stringify(e));
						// });
						uni.getProvider({
						    service: 'payment',
						    success: function (res) {
						        console.log(res.provider,"888888")
						        if (~res.provider.indexOf('wxpay')) {

						            uni.requestPayment({
						                "provider": "wxpay",  //固定值为"wxpay"
						                "orderInfo": orderInfo, 
						                success: function (res) {
											console.log(res,"999999999999");
						                    var rawdata = JSON.parse(res.rawdata);
						                    console.log("支付成功");
						                },
						                fail: function (err) {
											
						                    console.log('支付失败:' + JSON.stringify(err));
						                }
						            });
						        }
						    }
						});
					
					
					}
				}).catch((err) => { 
					console.log('请求失败', err);
				});
			},
			checkSelection(e) {
				console.log(e);
			}
		},

	} 
</script>

<style lang="scss">
	.active {
		border: 2rpx solid #d1c29b;
		background: #faf0d5;
	}

	.active1 {
		border: 2rpx solid #e7e7e7;
		background: #fff
	}

	.active2 {
		background: #d3c9a4;
		color: #735c1c;
	}

	.active3 {
		background: #f7f7f7;
		color: #686868;
	}

	uni-page-body,
	uni-page-refresh {
		background: linear-gradient(to bottom, #f8f8f8, #fff);
		height: 100%;

	}

	/deep/uni-checkbox .uni-checkbox-input {
		border-radius: 30rpx;

	}
</style>